<template>
  <div>
    <div class="v-bottom">
      <div class="vb-item sectionBtn" :class="{active: handleBottomBox.isPencil || handleBottomBox.isText}" @click="changeMotion(handleBottomBox.isText?'isText':'isPencil');showVBtm('color')">
        <i class="amsp el-amsp-yanse"></i><span class="vb-name">颜色</span>
      </div>
      <div class="vb-item sectionBtn" :class="{active: handleBottomBox.isPencil}" @click="changeMotion('isPencil');showVBtm('shape')">
        <i class="amsp el-amsp-xingzhuang-sanjiaoxing"></i><span class="vb-name">形状</span>
      </div>
      <div class="vb-item colorBtn" :class="{active: handleBottomBox.isPencil}" @click="changeMotion('isPencil');showVBtm('lineWidth')">
        <i class="amsp el-amsp-column-width"></i><span class="vb-name">宽度</span>
      </div>
      <div class="vb-item alphaBtn" :class="{active: handleBottomBox.isText}" @click="changeMotion('isText')">
        <i class="amsp el-amsp-wenbenkuai"></i><span class="vb-name">文本</span>
      </div>
      <div class="vb-item alphaBtn" :class="{active: handleBottomBox.isRubber}" @click="changeMotion('isRubber')">
        <i class="amsp el-amsp-xiangpi"></i><span class="vb-name">橡皮</span>
      </div>
      <div class="vb-item resetBtn" @click="clearAll">
        <i class="amsp el-amsp-tubiaozhuanqu-25"></i><span class="vb-name">清除</span>
      </div>
      <div class="vb-item resetBtn" @click="goCvs(-1)">
        <i class="amsp el-amsp-shangyibu"></i><span class="vb-name">撤销</span>
      </div>
      <div class="vb-item resetBtn" @click="goCvs(1)">
        <i class="amsp el-amsp-xiayibu"></i><span class="vb-name">恢复</span>
      </div>

    </div>
    <el-drawer :visible.sync="drawerInf.flag" :title="drawerInf.title" direction="btt" custom-class="selectEldrawer" :size="drawerInf.size">
      <ul class="ful" :class="drawerInf.type">
        <template v-if="drawerInf.type == 'color'">
          <li v-for="(a,b) in drawerInf.list" @click="curPencil.color=a"><span class="amspbox" :class="{active: curPencil.color == a}"><i class="amsp el-amsp-checkbox-full" :style="{color: a}"></i></span></li>
        </template>

        <template v-if="drawerInf.type == 'shape'">
          <li v-for="(a,b) in drawerInf.list" @click="curPencil.shape=b"><span class="amspbox" :class="{active: curPencil.shape == b}"><i class="amsp" :class="a"></i></span></li>
        </template>

        <template v-if="drawerInf.type == 'lineWidth'">
          <li v-for="(a,b) in drawerInf.list" @click="curPencil.lineWidth=a"><span class="amspbox" :class="{active: curPencil.lineWidth == a}"><i class="linei" :style="{height: `${a}px`}"></i></span></li>
        </template>
      </ul>
    </el-drawer>
  </div>
</template>

<script>
  
export default {
  components: {
  },
  props: ['handleBottomBox', 'curPencil'],
  data() {
    return {
      color: ['#E54848', '#000000', '#F5B604', '#55DE4B', '#46B0E4'],
      shape: ['el-amsp-quxian1', 'el-amsp-line', 'el-amsp-tx-zhengfangxing', 'el-amsp-radio-on', 'el-amsp-ai28'],
      lineWidth: [3, 5, 8],
      drawerInf: {
        flag: false,
        title: '',
        type: '',
        list: []
      }
    }
  },
  computed: {
  },
  created() {},
  mounted() {},

  methods:{
    changeMotion (type) {
      for (let a in this.handleBottomBox) {
        this.handleBottomBox[a] = a == type
      }
    },
    showVBtm (type) {
      switch (type) {
        case 'color':
          this.drawerInf = {
            flag: true,
            title: '请选择颜色',
            size: '15%',
            type: type,
            list: this.color
          }
        break
        case 'shape':
          this.drawerInf = {
            flag: true,
            title: '请选择形状',
            size: '15%',
            type: type,
            list: this.shape
          }
        break
        case 'lineWidth':
          this.drawerInf = {
            flag: true,
            title: '请选择线条宽度',
            size: '15%',
            type: type,
            list: this.lineWidth
          }
        break
      }
    },
    goCvs (n) {
      this.$parent.$refs.userCanvas.goCvs(n)
    },
    clearAll () {
      this.$parent.$refs.userCanvas.clearAll()
    }
  }
}
</script>
<style scoped lang="less">
.ful.color, .ful.shape, .ful.lineWidth {
  padding-left: 0;
  li {
    display: flex;
    height: 30px;
    align-items: center;
    justify-content: center;
  }
  .amspbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    &.active {
      background-color: #e3f7ff;
    }
  }
}
.ful.color, .ful.shape {
  .amsp {
    font-size: 20px;
  }
}
.ful.lineWidth {
  .linei {
    display: block;
    width: 20px;
    background-color: #000;
  }
  
}
</style>